<template>
  <main id="util">
    <el-button-group class="ml-4">
    <el-button :type="cur==item?'primary':''" v-for="(item,i) in list" :key="i">{{ item }}</el-button>
  </el-button-group> 
  <div v-if="cur == 'json'"> 格式化JSON </div>  
  <div v-if="cur == 'css'"> 提取HTML 中的class className </div>  
  <div v-if="cur == 'del'"> 删除一些文件 </div>
    <el-input v-model="leftTxt" autosize type="textarea" placeholder="Please input" />
    <el-input v-model="rightTxt" autosize type="textarea" />
  </main>
</template>

<script>
import service from "../../common/api.js";
var res;
export default {
  data() {
    return {
      cur:'json',
      list: "json,css,url,decode,del".split(","),
    };
  },

  created() {
    Object.assign(this, { service });
    setTimeout(() => {
      var app = document.querySelector("#util");
      app.ondragenter = app.ondragleave = app.ondragover = () => {
        return false;
      };
      app.ondrop = async function (event) {
        var files = event.dataTransfer.files;
        var { name,type} = files[0]
        //service.post("/system ")
        console.log(files[0])  // type == null 尝试rd 和
      };
    }, 1000);
  },
  methods: {
    async change(e) {
      var s = e.target.value.split("\n");
      s = s
        .map((e) => {
          if (e.includes("className")) {
            return "." + e.split('"')[1].trim() + "{\n\n}";
          }
        })
        .filter((e) => e)
        .join("\n");
      this.rightTxt = e;
    },
  },
};
</script>

<style scoped>

</style>
